<template>
	<s-layout class="set-wrap" title="问题反馈">
		<uni-forms ref="form" :modelValue="state.formData" border>
			<view class="bg-white type-box ss-p-x-20 ss-p-y-30">
				<view class="title ss-m-b-44">请选择类型</view>
				<view class="ss-m-l-12">
					<radio-group @change="radioChange">
						<label class="ss-flex ss-col-center ss-m-b-40" v-for="item in state.radioList" :key="item.type">
							<radio :value="item.type" color="var(--ui-BG-Main)" style="transform: scale(0.8)" />
							<view class="radio-subtitle">{{ item.type }}</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="bg-white ss-p-x-20 ss-p-y-30 ss-m-t-20">
				<view class="title ss-m-b-30"> 相关描述 </view>
				<view class="textarea">
					<uni-easyinput :inputBorder="false" type="textarea" v-model="state.formData.content"
						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
						placeholder="客官~请描述您遇到的问题，建议上传照片" clearable></uni-easyinput>
					<uv-upload :fileList="state.fileList" name="1" multiple :maxCount="9" @afterRead="afterRead"
						@delete="deletePic"></uv-upload>


					<!-- <s-uploader
            v-model:url="state.formData.images"
            fileMediatype="image"
            limit="9"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          ></s-uploader> -->
				</view>
			</view>
			<view class="bg-white ss-p-x-20 ss-p-y-30 ss-m-t-20">
				<view class="title ss-m-b-30"> 联系方式 </view>
				<view class="mobile-box">
					<uni-easyinput :inputBorder="false" type="number" v-model="state.formData.phone" paddingLeft="10"
						placeholder="请输入您的联系电话" />
				</view>
			</view>
		</uni-forms>
		<su-fixed bottom placeholder>
			<view class="ss-flex ss-row-between ss-p-x-30 ss-p-y-10">
				<button class="kefu-btn ss-reset-button" @tap="sheep.$router.go('/pages/chat/index')">
					联系客服
				</button>
				<button class="submit-btn ss-reset-button ui-BG-Main ui-Shadow-Main" @tap="onSubmit">
					提交
				</button>
			</view>
		</su-fixed>
	</s-layout>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { computed, reactive, ref, unref } from 'vue';
	import sheep from '@/sheep';

	const filesRef = ref(null);
	const state = reactive({
		radioList: [{
				type: '产品功能问题反馈',
			},
			{
				type: '建议及意见反馈',
			},
			{
				type: '投诉客服其他问题',
			},
		],
		formData: {
			content: '',
			phone: '',
			images: [],
			type: '',
		},
		imageFiles: [],
		current: 0,
		fileList: []
	});
	const deletePic = (event) => {
		state.fileList.splice(event.index, 1)
	}
	const afterRead = (ev) => {
		const file = ev.file[0].url
		state.fileList.push({
			url: file,
			type: 'image'
		})
		uploadAvatar(file)
	}
	const uploadAvatar = (tempUrl) => {
		if (!tempUrl) return;
		uni.getFileSystemManager().readFile({
			filePath: tempUrl,
			encoding: 'base64',
			success: async res => {
				let base64 = 'data:image/jpeg;base64,' + res.data;
				// 先设置本地预览
				let params = {
					base64_data: base64,
				}
				const { code, data } = await sheep.$api.user.uploadBase64(params)
				if (code == 1) {
					state.formData.images.push(data.full_url)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}

			},
			fail: (e) => {
				uni.hideLoading();
				console.error("图片转换失败:", e);
				uni.showToast({
					title: '图片处理失败',
					icon: 'none'
				});
			}
		});
	}
	async function onSubmit() {
		if (!state.formData.type) {
			sheep.$helper.toast('请选择类型');
			return;
		}
		if (!state.formData.content) {
			sheep.$helper.toast('请描述您遇到的问题');
			return;
		}
		if (!state.formData.phone) {
			sheep.$helper.toast('请输入您的联系方式');
			return;
		}

		const { code } = await sheep.$api.app.feedback(state.formData);
		if (code === 1) {
			sheep.$router.back();
		}
	}

	function radioChange(e) {
		state.formData.type = e.detail.value;
	}
</script>

<style lang="scss" scoped>
	.type-box {
		border-top: 2rpx solid #f9fafb;
	}

	.uni-forms {
		width: 100%;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: normal;
	}

	:deep() {
		.uni-easyinput__placeholder-class {
			color: #bbbbbb !important;
			font-size: 28rpx !important;
			font-weight: 400 !important;
			line-height: normal !important;
		}

		.uni-forms-item__label .label-text {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
		}

		.uni-list-item__content-title {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
		}

		.uni-easyinput__content-textarea {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			margin-top: 4rpx !important;
			padding-left: 20rpx !important;
		}

		.uni-icons {
			font-size: 40rpx !important;
		}

		.icon-del-box {
			width: 32rpx;
			height: 32rpx;
			top: 0;
			right: 0;

			.icon-del {
				width: 24rpx;
			}
		}
	}

	.radio-subtitle {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
	}

	.textarea {
		min-height: 322rpx;
		background: #f9fafb;
		border-radius: 20rpx;
		padding: 20rpx;
		margin: 30rpx 20rpx 46rpx 0;

		.area {
			height: 238rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #333;
			line-height: 50rpx;
			width: 100%;
		}

		.pl-style {
			font-size: 24rpx;
			color: #b1b3c7;
			font-weight: 500;
		}
	}

	.mobile-box {
		background: #f9fafb;
		border-radius: 20rpx;
	}

	.submit-btn {
		width: 334rpx;
		height: 74rpx;
		border-radius: 37rpx;
	}

	.kefu-btn {
		width: 334rpx;
		height: 74rpx;
		border-radius: 37rpx;
		background: #eeeeee;
		color: #333333;
	}
</style>